<template>
	<div class="app-container indexbox">
		<el-row :gutter="24">
			<el-col :span="12">
				<el-card shadow="never" style="position: relative;">
					<div id="echarts"></div>
					<div class="datetime">
						<el-row :gutter="20">
							<el-col :span="4" style="height: 40px; display: flex; justify-content: center; align-items: center;">
								开始时间
							</el-col>
							<el-col :span="8">
								<el-date-picker ref="setTime" value-format="yyyy-MM-dd" style="width: 100%;" v-model="setTime" type="date" placeholder="选择日期时间" :picker-options="pickerOptions0">
								</el-date-picker>
							</el-col>
							<el-col :span="4" style=" height: 40px;display: flex; justify-content: center; align-items: center;">
								结束时间
							</el-col>
							<el-col :span="8">
								<el-date-picker @blur="valuelist" ref="Timeout" value-format="yyyy-MM-dd" style="width: 100%;" v-model="Timeout" type="date" placeholder="选择日期时间" :picker-options="pickerOptions0">
								</el-date-picker>
							</el-col>
						</el-row>
					</div>
				</el-card>
			</el-col>
			<el-col :span="12">
				<div class="righttop">
					<el-row :gutter="24">
						<el-col :span="12">
							<el-card shadow="never">
								<div class="pending">
									<img src="../../public/img/1.png" />
									<div class="pendtext">
										<p class="text">待处理警情</p>
										<h1 class="num">{{ rightnum.undisposedEvent }}</h1>
									</div>
								</div>
							</el-card>
						</el-col>
						<el-col :span="12">
							<el-card shadow="never">
								<div class="pending">
									<img src="../../public/img/3.png" />
									<div class="pendtext">
										<p class="text">警情总量</p>
										<h1 class="num">{{ rightnum.allEvent }}</h1>
									</div>
								</div>
							</el-card>
						</el-col>
					</el-row>
					<el-row :gutter="24" style="margin-top: 10px;">
						<el-col :span="12">
							<el-card shadow="never">
								<div class="pending">
									<img src="../../public/img/2.png" />
									<div class="pendtext">
										<p class="text">事故总量</p>
										<h1 class="num">{{ rightnum.roadAccident }}</h1>
									</div>
								</div>
							</el-card>
						</el-col>
						<el-col :span="12">
							<el-card shadow="never">
								<div class="pending">
									<img src="../../public/img/4.png" />
									<div class="pendtext">
										<p class="text">道路病害总量</p>
										<h1 class="num">{{ rightnum.roadDiseases }}</h1>
									</div>
								</div>
							</el-card>
						</el-col>
					</el-row>
				</div>
			</el-col>
		</el-row>
		<el-row :gutter="24" style="margin-top: 20px;">
			<el-col :span="12">
				<el-card shadow="never">
					<div class="leftbottom">
						<el-table v-loading="loading" :data="eventList">
							<el-table-column label="事件类型" align="center" prop="eType">
								<template slot-scope="scope">
									<span>{{ evevFilter(scope.row.eType) }}</span>
								</template>
							</el-table-column>
							<el-table-column label="道路方向" align="center" prop="direction" />
							<!--<el-table-column label="来源" align="center" prop="source" :formatter="sourceFormat" />
							<el-table-column label="事件详情" align="center" prop="details" />-->
							<el-table-column label="位置描述" align="center" prop="address" />
							<el-table-column label="状态" align="center" prop="eStatus">
								<template slot-scope="scope">
									<span v-if="scope.row.eStatus == 0" style="color: #f00;">未处理</span>
									<span v-if="scope.row.eStatus == 1" style="color: #f7d904;">处理中</span>
									<span v-if="scope.row.eStatus == 2" style="color: #0294fd;">已结束</span>
								</template>
							</el-table-column>
							<el-table-column label="距今时长" align="center">
								<template slot-scope="scope">
									<span>{{ timeFn(scope.row.eCreateTime) }}</span>
								</template>
							</el-table-column>
							<el-table-column label="发生时间" align="center" prop="eCreateTime">
								<template slot-scope="scope">
									<span>{{ scope.row.eCreateTime }}</span>
								</template>
							</el-table-column>
						</el-table>
						<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
					</div>
				</el-card>
			</el-col>
			<el-col :span="12">
				<el-card shadow="never">
					<div class="rightbottom">
						<el-table v-loading="loading1" :data="eventVoiceInfoList">
							<el-table-column label="手机号" align="center" prop="phone" />
							<el-table-column label="姓名" align="center" prop="personName" />
							<el-table-column label="呼叫次数" align="center" prop="sendCount" />
							<el-table-column label="呼叫状态" align="center" prop="status" :formatter="statusFormat1" />
							<!--<el-table-column label="呼叫内容" align="center" prop="callContent" />-->
							<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
								<template slot-scope="scope">
									<el-button size="mini" type="text" icon="el-icon-phone-outline" @click="recall(scope.row)">重呼</el-button>
								</template>
							</el-table-column>
						</el-table>

						<pagination v-show="total1>0" :total="total1" :page.sync="queryParams1.pageNum" :limit.sync="queryParams1.pageSize" @pagination="getList" />
					</div>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import { eventStatistics, resendCall, eventStatisticsChart,listStatus } from '@/api/index';
	import { listEvent } from '@/api/event/eventInfo';
	// 事件列表
	import { listExigencyEvent } from '@/api/event/eventType';
	//语音
	import { listEventVoiceInfo } from "@/api/event/eventVoiceInfo";

	export default {
		name: "index",
		data() {
			return {
				rightnum: '',
				// 表格数据
				eventList: [],
				total: 0,
				exigencyEventList: [], //事件类型列表
				setTime: '', // 开始时间
				Timeout: '', // 结束时间
				loading: false,
				loading1: false,
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10,
				},
	      // 语音记录总条数
	      total1: 0,
	      // 语音记录表格数据
	      eventVoiceInfoList: [],
	      statusOptions: [],
				// 查询参数
				queryParams1: {
					pageNum: 1,
					pageSize: 10,
					status: 2,
				},
				time: '',
				pickerOptions0: {
					disabledDate(time) {
						return time.getTime() > Date.now() - 8.64e6; //如果没有后面的-8.64e6就是不可以选择今天的
					}
				},
			};
		},
		created() {
			this.getList();
			this.getDicts('source_incident').then(response => {
				this.sourcelist = response.data;
			});
			
	    this.getDicts("event_voice_status").then(response => {
	      this.statusOptions = response.data;
	    });
		},
		mounted() {
			
		},
		methods: {
			getList() {
				eventStatistics().then(response => {
					console.log(response);
					this.rightnum = response.data;
				});
				//事件
				this.loading = true;
				listStatus(this.queryParams,{
					statusList: [0,1]
				}).then(response => {
					this.eventList = response.rows;
					this.total = response.total;
					this.loading = false;
				});

				listExigencyEvent().then(response => {
					this.exigencyEventList = response.rows;
				});
				//语音
	      this.loading1 = true;
	      listEventVoiceInfo(this.queryParams1).then(response => {
	        this.eventVoiceInfoList = response.rows;
	        this.total1 = response.total;
	        this.loading1 = false;
	      });
	      this.getdata();
	      clearTimeout(this.time)
	      let that = this;
	      this.time = setTimeout(function(){
	      	that.getList()
	      },10000)
			},
			getdata(){				
	      eventStatisticsChart({
	      	"startTime": this.setTime,
 					"endTime": this.Timeout
	      }).then(response => {
	        console.log(response);
	        this.echarts(response.data)
	      });
			},
			recall(row){
				this.$confirm('是否确认重新发送?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return resendCall(row.id);
        }).then(() => {          
          this.msgSuccess("发送成功");
        })
			},
			sourceFormat(row, column) {
				return this.selectDictLabel(this.sourcelist, row.source);
			},
	    // 呼叫状态字典翻译
	    statusFormat1(row, column) {
	      return this.selectDictLabel(this.statusOptions, row.status);
	    },
			echarts(data) {
				
				let eventNameList = data.eventNameList;
				let sectionList = data.sectionList;
				let dateTimeList = data.dateTimeList;
				let statisticsChartEntityList = data.statisticsChartEntityList;
				for(var i=0;i<statisticsChartEntityList.length;i++){
					statisticsChartEntityList[i].type = 'bar';
//					statisticsChartEntityList[i].label = {
//						show: true
//					};
				}
				// 基于准备好的dom，初始化echarts实例
				var myChart = this.$echarts.init(document.getElementById('echarts'));
				let option = {
					color: ['#4ac2a4', 'pink', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc', '#5470c6', '#91cc75', '#ee6666'],
					title: {
			        text: '路段事件统计',
			        top: 4
			    },
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						},
						formatter: function(params) {
							//							console.log(params)
							var arr = params[0].axisValueLabel + '<br/>'
							for(var i = 0; i < params.length; i++) {
								if(i < 2) {
									arr += params[i].marker + " " + params[i].seriesName + ' : ' + params[i].value + '<br/>'
								} else if(i == 2) {
									arr += params[i].marker + " " + params[i].seriesName + ' : ' + params[i].value + '<br/>'
								} else {
									arr += params[i].marker + " " + params[i].seriesName + ' : ' + params[i].value + '<br/>'
								}
							}
							return arr;
						}
					},
					legend: {
						data: eventNameList,
						type: 'scroll',
						orient: 'vertical',
						right: 0,
		        top: 38,
		        bottom: 20,
					},
					grid: {
						left: '2%',
						right: '15%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: {
						type: 'category',
						data: dateTimeList
					},
					yAxis: {
						type: 'value',
						boundaryGap: [0, 0.01]
					},
					series: statisticsChartEntityList
				};
				myChart.setOption(option);
			},

			valuelist() {
				console.log(this.setTime < this.Timeout)

				if(this.setTime != '' && this.Timeout != '') {
					if(this.setTime < this.Timeout) {
						this.getdata();
					} else {
						this.$message({
							message: '开始时间不能大于结束时间',
							type: 'warning'
						});
					}
				} else {
					this.$refs.setTime.focus()
				}
			},
			// 过滤信息
			evevFilter(id) {
				for(let [key, val] of Object.entries(this.exigencyEventList)) {
					if(val.id == id) {
						return val.eventName;
					}
				}
			},
			timeFn(dateBegin) {
				//如果时间格式是正确的，那下面这一步转化时间格式就可以不用了
				var dateEnd = new Date(); //获取当前时间
				var dateDiff = dateEnd.getTime() - new Date(dateBegin); //时间差的毫秒数
				var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000)); //计算出相差天数
				var leave1 = dateDiff % (24 * 3600 * 1000) //计算天数后剩余的毫秒数
				var hours = Math.floor(leave1 / (3600 * 1000)) //计算出小时数
				//计算相差分钟数
				var leave2 = leave1 % (3600 * 1000) //计算小时数后剩余的毫秒数
				var minutes = Math.floor(leave2 / (60 * 1000)) //计算相差分钟数
				//计算相差秒数
				var leave3 = leave2 % (60 * 1000) //计算分钟数后剩余的毫秒数
				var seconds = Math.round(leave3 / 1000)

				var leave4 = leave3 % (60 * 1000) //计算分钟数后剩余的毫秒数
				var minseconds = Math.round(leave4 / 1000)
				var timeFn = [];
				timeFn.push(dayDiff);
				timeFn.push(hours);
				timeFn.push(minutes);
				timeFn.push(seconds);
				let hour = dayDiff * 24 + hours * 1;
				//			    debugger
				if(0 < hour < 10) {
					this.hour = '0' + hour;
				} else if(hour == 0) {
					this.hour = hour;
				} else {
					this.hour = hour;
				}
				if(minutes < 10) {
					this.minutes = '0' + minutes;
				} else {
					this.minutes = minutes;
				}
				if(seconds < 10) {
					this.seconds = '0' + seconds;
				} else {
					this.seconds = seconds;
				}
				return hour+ '小时' + minutes+ '分钟';
			},
			/** 搜索按钮操作 */
			handleQuery() {
				this.queryParams.pageNum = 1;
				this.getList();
			},
		}
	};
</script>

<style scoped lang="scss">
	.indexbox {
		background: #f5f7fa;
	}
	
	#echarts {
		height: 270px;
	}
	
	.datetime {
		position: absolute;
		top: 12px;
		right: 53px;
		width: 60%;
	}
	
	.righttop {
		height: 270px;
	}
	
	.pending {
		height: 110px;
		img {
			margin-top: 17px;
			margin-left: 25px;
			float: left;
		}
		.pendtext {
			display: inline-block;
			height: 100%;
			padding-left: 20px;
			p {
				margin: 10px;
			}
			h1 {
				margin: 10px;
			}
			.num {
				font-size: 40px;
				font-family: 'yjsz';
			}
		}
	}
	
	.leftbottom {
		height: 370px;
		overflow: auto;
	}
	
	.rightbottom {
		height: 370px;
		overflow: auto;
	}
</style>